<template>
  <el-container>
    <el-main>
      <el-card>
        <div slot="header">
          <span class="questionName">{{ question.questionName }}</span>
          <el-tag
            v-for="(item,id) in question.tagsList"
            :key="id"
            style="margin-left: 5px"
          >
            {{ item.tags }}
          </el-tag>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="openDrawer"
          >
            ChatGPT搜索
          </el-button>
        </div>
        <el-button
          :type="answerBtnType"
          size="mini"
          @click="showAnswer"
        >
          {{ answerBtnText }}
        </el-button>
        <v-md-editor
          v-show="showAnswerFlag"
          v-model="questionAnswer"
          :mode="mode"
        />
        <!-- 分割线 -->
        <el-divider />
        <el-row>
          <el-col :span="6">
            <el-link @click="collection">
              <svg-icon
                class="icon-class"
                :underline="false"
                :icon-class="icon.collection"
              />
              收藏
            </el-link>
          </el-col>
          <el-col :span="6">
            <svg-icon
              class="icon-class"
              icon-class="eye"
              :underline="false"
            />
            遇到
          </el-col>
          <el-col :span="6">
            <svg-icon
              class="icon-class"
              :underline="false"
              icon-class="ali-fenxiang"
            />
            <el-link @click="openShare">分享</el-link>
          </el-col>
          <el-col :span="6">
            <svg-icon
              class="icon-class"
              icon-class="ali-more"
              :underline="false"
            />
            操作
          </el-col>
        </el-row>
      </el-card>
      <el-card>
        <el-tabs type="border-card">
          <el-tab-pane label="回答">
            <span slot="label"><i class="el-icon-link" /> ({{ answerList.length || 0 }}条)回答</span>
            <el-row>
              <el-col :span="24">
                <v-md-editor
                  v-if="answer.showEditorFlag"
                  v-model="answer.answerMd"
                  height="200px"
                />
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-button class="rightBtn" type="primary" @click="answer.showEditorFlag = !answer.showEditorFlag">{{
                  answer.showEditorBtnTxt }}
                </el-button>
                <el-button v-if="answer.showEditorFlag" class="rightBtn" type="primary" @click="addAnswer">添加回答
                </el-button>
              </el-col>
            </el-row>
            <el-row
              v-for="(item, index) in answerList"
              :key="index"
            >
              <el-col :span="24">
                <div class="comment">
                  <div class="popover-box user-popover popover">
                    <a class="user-link">
                      <el-image
                        :src="item.answerUser.avatar"
                        class="lazy avatar"
                      />
                    </a>
                  </div>
                  <div class="content-box">
                    <div class="comment-main">
                      <span v-if="false" class="delete">删除</span>
                      <div class="user-box">
                        <div class="popover-box user-popover">{{ item.answerUser.nickname || item.answerUser.username
                        }}
                        </div>
                        <el-tag
                          v-if="item.questionAnswer.acceptFlag"
                          style="margin: 0 10px"
                        >
                          默认答案
                        </el-tag>
                        <div class="time">{{ item.questionAnswer.createTime }}</div>
                      </div>
                      <div class="content">
                        <v-md-editor
                          v-model="item.questionAnswer.answerMd"
                          :mode="mode"
                        />
                      </div>
                      <div class="limit-btn" />
                      <div class="limit-btn" />
                      <div class="action-box">
                        <div class="item dig-item">
                          <svg-icon
                            icon-class="ali-like"
                            :underline="false"
                          />
                          {{ item.actionVo.likeNumber }}
                        </div>
                        <div class="item dig-item" @click="answerUseful(item.questionAnswer.id,0)">
                          <svg-icon
                            v-if="item.actionVo.useful"
                            icon-class="ali-yidianzan"
                            :underline="false"
                          />
                          <svg-icon
                            v-else
                            icon-class="ali-dianzan"
                            :underline="false"
                          />
                          {{ item.actionVo.usefulNumber }}
                        </div>
                        <div class="item" @click="answerUseful(item.questionAnswer.id,1)">
                          <svg-icon
                            v-if="item.actionVo.useless"
                            icon-class="ali-yidiancai"
                            :underline="false"
                          />
                          <svg-icon
                            v-else
                            icon-class="ali-diancai"
                            :underline="false"
                          />
                          {{ item.actionVo.uselessNumber }}
                        </div>
                        <div class="item">
                          <svg-icon
                            icon-class="ali-comment-pinglun"
                            :underline="false"
                          />
                          {{ item.actionVo.commentNumber }}
                        </div>
                      </div>
                    </div>
                    <div class="subcomment-wrapper" />
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="评论">评论管理</el-tab-pane>
        </el-tabs>
      </el-card>
    </el-main>
    <el-aside>
      <el-card>
        <div slot="header">
          <span class="questionName">题目信息</span>
          <el-button style="  float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div>
          <p><i class="el-icon-view" />浏览量: {{ question.showNum || 0 }}</p>
          <p><i class="el-icon-view" />被收藏: {{ question.collectionNum || 0 }}</p>
          <p><i class="el-icon-view" />遇见过: {{ question.meetNum || 0 }}</p>
          <p><i class="el-icon-timer" />创建时间: {{ question.createTime || question.interviewTime }}</p>
          <p><i class="el-icon-timer" />面试时间: {{ question.interviewTime }}</p>
          <p><i class="el-icon-user" />上传者:
            <el-avatar :src="question.createdUser.avatar" />
            {{ question.createdUser.nickname || question.createdUser.username() }}
          </p>
        </div>
      </el-card>
      <el-card>
        <div slot="header">
          <span class="questionName">支持一下</span>
        </div>
        <el-image
          src="https://cdn.lesscoding.net/admire.jpg"
        />
      </el-card>
    </el-aside>
    <favorite-list
      :dialog-visible="favoriteVisible"
      :close-favorite="closeFavorite"
      :change-visible="changeVisible"
    />
    <add-favorite
      :add-visible="addVisible"
      :change-visible="changeVisible"
    />
    <el-drawer
      title="ChatGPT搜索 -由https://chat.forchange.cn提供服务"
      :visible.sync="drawer"
      :direction="direction"
    >
      <!--<el-main class="drawerMain">-->
      <!--  <div v-html="drawerText"></div>-->
      <!--</el-main>-->
      <!--<el-input-->
      <!--  class="send"-->
      <!--  placeholder="发送消息给AI"-->
      <!--  v-model="prompt"-->
      <!--&gt;-->
      <!--  <el-button slot="append" icon="el-icon-search"></el-button>-->
      <!--</el-input>-->
      <chatGPT :text="question.questionName" />
    </el-drawer>
  </el-container>
</template>
<script>
import sysInterviewQuestion from '@/api/interviewQuestion'
import FavoriteList from '@/components/Favorite/favoriteList'
import AddFavorite from '@/components/Favorite/addFavorite'
import questionAnswer from '@/api/questionAnswer'
import sysAnswerUseful from '@/api/answerUseful'
import chatGPT from '@/views/interviewQuestion/chatGPT'

export default {
  components: {
    FavoriteList,
    AddFavorite,
    chatGPT
  },
  data() {
    return {
      question: {},
      mode: 'preview',
      answerBtnType: 'primary',
      showAnswerFlag: false,
      answerBtnText: '查看答案',
      questionAnswer: '',
      icon: {
        collection: 'ali-shoucang',
        meet: 'ali-meet',
        share: 'ali-share',
        action: 'ali-action'
      },
      collectionFlag: false,
      favoriteVisible: false,
      addVisible: false,
      answer: {
        editorMode: 'text',
        answerMd: '',
        showEditorBtnTxt: '打开编辑器',
        showEditorFlag: true,
        answerList: [],
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      answerList: [],
      drawer: false,
      direction: 'rtl'
    }
  },
  watch: {

    answer: {
      deep: true,
      handler(newVal, oldVal) {
        this.answer.showEditorBtnTxt = newVal.showEditorFlag ? '关闭编辑器' : '打开编辑器'
      }
    }
  },
  created() {
    const id = this.$route.params.id
    if (id) {
      this.getQuestionDetails(id)
    }
    this.questionAnswerList()
  },
  methods: {
    getQuestionDetails(id) {
      sysInterviewQuestion.getDetail({ id: id, plusShowNum: true }).then(resp => {
        this.question = resp.data
        const acceptAnswer = resp.data.acceptAnswer
        this.questionAnswer = acceptAnswer ? acceptAnswer.answerMd : '暂无答案'
        this.icon.collection = this.question.whetherCollection ? 'ali-yishoucang' : 'ali-shoucang'
      })
    },
    showAnswer() {
      if (!this.showAnswerFlag) {
        this.answerBtnType = 'danger'
        this.answerBtnText = '隐藏答案'
        this.showAnswerFlag = true
      } else {
        this.answerBtnType = 'primary'
        this.answerBtnText = '查看答案'
        this.showAnswerFlag = false
      }
    },
    collection() {
      this.collectionFlag = !this.collectionFlag
      this.favoriteVisible = true
    },
    changeVisible(favoriteVisible, addVisible) {
      this.favoriteVisible = favoriteVisible
      this.addVisible = addVisible
    },
    addAnswer() {
      if (this.answer.answerMd === '') {
        this.$message({
          type: 'error',
          message: '请填写问题答案',
          showClose: true
        })
      }
      const data = {
        questionId: this.$route.params.id,
        answerMd: this.answer.answerMd
      }
      questionAnswer.edit(data).then(resp => {
        console.log(resp)
        this.answer.answerMd = ''
      })
    },
    closeFavorite() {
      this.favoriteVisible = false
      this.getQuestionDetails(this.$route.params.id)
    },
    questionAnswerList() {
      questionAnswer.questionAnswer({ questionId: this.$route.params.id }).then(resp => {
        this.answerList = resp.data
      })
    },
    /**
       * 点踩
       */
    answerUseful(answerId, type) {
      sysAnswerUseful.edit({ answerId, type }).then(resp => {
        this.questionAnswerList()
      })
    },
    openShare() {
      this.$openPop('views/interviewQuestion/shareQrCode', {
        height: '400px',
        width: '400px',
        text: window.location.href
      })
    },
    openDrawer() {
      this.drawer = true
      this.drawerText = this.drawerText.replaceAll('\\n\\n', '<br/>')
      this.drawerText += this.drawerText
      this.beforeArr.push({
        type: 0,
        text: this.question.questionName,
        avatar: this.$store.state.user.avatar
      })
    }
  }
}
</script>
<style scoped>
  @import "../../styles/comment.scss";

  .el-main {
    background-color: #E9EEF3;
    margin: 10px;
  }

  .rightBtn {
    float: right;
    margin: 15px 7px;
  }

  .el-avatar {
    vertical-align: middle;
    margin: 0 5px;
  }

  .el-card {
    margin: 15px 0;
  }

  .el-card__header {
    line-height: 18px;
    overflow: hidden;
  }

  .icon-class {
    font-size: 18px;
  }

  .el-aside {
    background-color: #D3DCE6;
    margin: 10px;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .questionName {
    line-height: 18px;
    font-weight: bolder;
    margin-right: 15px;
  }
</style>
